<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="品名">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="类别">
      <el-select v-model="form.other" placeholder="请选择食品的属性" @change="selectData($event)">
        <el-option
          v-for="item in options"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="食品图片">
      <el-upload
        action="fakeAction"
        list-type="picture-card"
        :http-request="uploadFile"
      >
        <i class="el-icon-plus" />
      </el-upload>
    </el-form-item>
    <el-form-item label="卡路里">
      <el-input v-model="form.size" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" />
    </el-form-item>
    <el-form-item label="原文地址">
      <el-input v-model="form.remarkUrl" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import getClassOptions from '@/api/class'
import { uploadFiles } from '@/api/common'
import { addFood } from '@/api/food'

export default {
  name: 'Index',
  data() {
    return {
      form: {
        name: '',
        smell: '',
        size: '',
        remark: '',
        pic: '',
        remarkUrl: '',
        smellName: '',
        other: ''
      },
      options: [],
      uploadUrl: 'http://127.0.0.1:8088/upload',
      obj: {
        name: '',
        code: ''
      }
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    onSubmit() {
      // this.form.smell = this.obj.value
      // this.form.smellName = this.obj.label
      console.log(this.form)
      addFood(this.form).then(res => {
        console.log(res)
        if (res.code === 100) {
          alert('添加成功')
          this.form = {}
        } else {
          alert('网络繁忙')
        }
      })
      console.log('submit!')
    },
    getOptions() {
      const data = {}
      getClassOptions(data).then(res => {
        console.log(res)
        this.options = res.data
        console.log(this.options)
      })
    },

    uploadFile(file) {
      // console.log(111)
      // 根据后台需求数据格式
      const form = new FormData()
      // 文件对象
      form.append('file', file.file)
      // 要在请求时添加特定属性（其他参数），所以要用自己方法覆盖默认的action
      // form.append('hld', JSON.stringify(this.uploadForm))
      uploadFiles(form).then((res) => {
        if (res) {
          this.$message.success('图片上传成功')
          console.log(res)
          this.form.pic = res.data.webUrl
        }
        // 上传完成后，清空缓存
        // this.$refs.upload.clearFiles()
        // this.$refs.uploadForm.resetFields()
      }).catch((error) => {
        console.log('上传失败 file：', file)
        // 即使失败，也会清除上传的图片，因为只有上传图片的动作发生时，他才会调用上传接口
        this.$refs.upload.clearFiles()
        this.$message.warning(error.message)
      })
    },
    selectData(vId) {
      console.log(vId)
      let obj = [{
        name: '',
        code: ''
      }]
      console.log(this.options)
      console.log(1111)
      obj = this.options.find((item) => {
        return item.code === vId
      })
      console.log(obj)
      this.form.smell = obj.code
      this.form.smellName = obj.name
      console.log(this.form)
    }

  }
}
</script>

<style scoped>

</style>
